<template>
	<view class="products" :data-theme="theme">
		<view class="bg_color" style="padding: 24rpx 24rpx;">
			<u-search v-model="keyword" @custom="searchProduct" @search="searchProduct" placeholder="请输入商品或品牌"
				actionText="搜索" :actionStyle="{color:'#FFF'}" shape="square" style="flex: none;"></u-search>
		</view>
		<u-tabs :list="tabList" :scrollable="false" @click="tabChangeClick" :lineColor="bgColor" :current="currentIndex"
			:activeStyle="{ color: '#000',fontWeight: '600'}" :inactiveStyle="{color:'#4c4d51'}"></u-tabs>
		<!-- 事业部，类目筛选 -->
		<view class="search-tab">
			<picker model="selector" @change="operatyConfirm" range-key="name" :value="invoiceClassIndex"
				:range="operatyDataList" @cancel="cancelPicker" style="display: flex;justify-content: center;flex: 1;">
				<view style="display: flex;flex: 1;justify-content: center;"
					:style="{color:invoiceClassShow?bgColor:null}" @click="invoiceClassShow = true">
					<view style="font-size: 24rpx;margin-right: 6rpx;">{{operatyCity?operatyCity:'全部管理城市'}}</view>
					<u-icon :name="invoiceClassShow?'arrow-up':'arrow-down'" size="11"
						:color="invoiceClassShow?bgColor:''"></u-icon>
				</view>
			</picker>
			<view class="class_choose" :style="{color:showUpClassPopup?bgColor:null}" @click="showUpClassPopup = true">
				<view style="font-size: 14px;margin-right: 6rpx;">{{subNameValue?subNameValue:'全部类目'}}</view>
				<u-icon :name="showUpClassPopup?'arrow-up':'arrow-down'" size="10"
					:color="showUpClassPopup?bgColor:''"></u-icon>
			</view>
		</view>

		<view v-if="tabList.type == 1">
			<view style="margin: 20rpx 0 30rpx 26rpx;font-size: 33rpx;font-weight: bold;">
				热搜关键词排名
			</view>
			<view class="card" style="margin: 0 20rpx 20rpx 20rpx;background-color: #fff;border-radius: 20rpx;">
				<uni-row class="demo-uni-row"
					style="font-size: 26rpx;color: #999;background-color: #fff;padding: 20rpx 10rpx;">
					<uni-col :span="2">
						<view class="demo-uni-col dark">排名</view>
					</uni-col>
					<uni-col :span="10">
						<view class="demo-uni-col dark">关键词</view>
					</uni-col>
					<uni-col :span="4">
						<view class="demo-uni-col dark">搜索次数</view>
					</uni-col>
					<uni-col :span="4">
						<view class="demo-uni-col dark" style="line-height: 1.3;">搜索次数较上月</view>
					</uni-col>
					<uni-col :span="4">
						<view class="demo-uni-col dark">月购买量</view>
					</uni-col>
				</uni-row>
				<uni-row class="demo-uni-row"
					style="font-size: 25rpx;font-weight: bolder; color: #000;background-color: #fff;padding: 20rpx 10rpx;">
					<uni-col :span="2">
						<view class="demo-uni-col dark" style="color: #4f4e54;">1</view>
					</uni-col>
					<uni-col :span="10">
						<view class="demo-uni-col dark">鸡蛋</view>
					</uni-col>
					<uni-col :span="4">
						<view class="demo-uni-col dark" style="align-items: center;text-align: center;">10万+</view>
					</uni-col>
					<uni-col :span="4">
						<view class="demo-uni-col dark" style="line-height: 1.3;text-align: center;">
							<image style="width: 40rpx;height: 40rpx;" mode="heightFix"
								src="../common/static/shangsheng.png"></image>
						</view>
					</uni-col>
					<uni-col :span="4">
						<view class="demo-uni-col dark" style="align-items: center;text-align: center;">10万+</view>
					</uni-col>
				</uni-row>
			</view>
		</view>


		<view style="margin: 20rpx 0 10rpx 26rpx;font-size: 33rpx;font-weight: bold;">
			热销商品
		</view>
		<swiper class="tab-view" :duration="300" :current.sync="currentIndex">
			<swiper-item class="swiper-item" v-for="(tab, index) in tabList" :key="index" style="display: flex;">
				<scroll-view scroll-y="true" :style="{ 'padding-bottom':'20rpx' }"
					style="height: 100%; overflow: hidden;" @scrolltolower="scrolltolowerFn">
					<swiper-page-recommed class="swiper-page" :bgColor="bgColor" :tab="tab" ref="tab"
						@toDetails="toDetails"></swiper-page-recommed>
				</scroll-view>
			</swiper-item>
		</swiper>

		<tui-drawer mode="bottom" :visible="showUpClassPopup" @close="closeComuleDate">
			<view class="ensure">
				<view class="classTitle"><text @click="closeComuleDate" class="iconfont icon-guanbi5"></text>商品类目
				</view>
				<view class="categories">
					<!-- 左侧：一级分类 -->
					<scroll-view class="primary" scroll-y>
						<view class="item" v-for="(item,index) in categroyData" :key="index"
							@click="selectCategory(index)" :class="{ active: index === selectedCategory }">
							<text class="name">{{item.name}}</text>
						</view>
					</scroll-view>
					<!-- 右侧：二级分类 -->
					<scroll-view class="secondary" scroll-y>
						<!-- 内容区域 -->
						<view class="panel  checke_item" @click="secondaryCategory(subItem,subIndex)"
							v-for="(subItem,subIndex) in categroyData[selectedCategory].sonList" :key="subItem.id">
							<view class="item_top" style="justify-content: space-between;display: flex;margin: 20rpx;">
								<view class="item_img" :class="{ active: subIndex === secondaryIndex }">
									{{subItem.name}}
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</tui-drawer>
	</view>
</template>

<script>
	import {
		getListAllApi
	} from '@/api/category.js';
	import {
		queryBusinessOperateCityApi,
	} from '@/api/operateCity.js';
	import swiperPageRecommed from "../common/nvue-swiper-recommed-page.nvue"
	import tuiDrawer from '../common/tui-drawer/index.vue';
	import {
		setThemeColor
	} from '@/utils/setTheme.js'
	let app = getApp();
	export default {
		components: {
			swiperPageRecommed,
			tuiDrawer
		},
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				keyword: '',
				tabList: [],
				currentIndex: 0,
				// --------------- 管理城市 --------------
				invoiceClassIndex: 0,
				invoiceClassShow: false,
				dataForm: {
					queryType: 0,
					current: 1,
					size: 10,
				},
				tableData: [],
				operatyDataList: [],
				operatyCity: '',
				// ----------类目---------
				showUpClassPopup: false,
				scrollTop: 0,
				tableForm: {
					hidden: 1,
					parentId: 0,
				},
				categroyData: [{
					name: '',
					sonList: [],
				}],
				selectedCategory: 0, //一级索引，处理分类事件
				secondaryIndex: -1, //二级分类索引
				subValue: {},
				subNameValue: '',
			};
		},
		onLoad() {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			this.tabList = [{
					id: "tab11",
					title: "",
					name: "客户热搜",
					type: 1,
					count: 0,
				},
				{
					id: "tab12",
					title: "",
					name: "热门推荐",
					type: 2,
					count: 0,
				},
				{
					id: "tab13",
					title: "",
					name: "稍后上品",
					type: 3,
					count: 0,
				}
			];
			this.getOperatyList();
			this.getList();
		},
		methods: {
			// 触底事件 onReachBottom 加载更多数据
			scrolltolowerFn() {
				this.$refs.tab[this.currentIndex].scrolltolowerFn();
			},
			tabChangeClick(item) {
				this.currentIndex = item.index;
			},
			toDetails(item) {
				this.goPage(`/pages/goodsRecommed/productDetail/productDetail`);
			},
			goPage(url) {
				uni.navigateTo({
					// animationType: animationType.type,
					// animationDuration: animationType.duration,
					url
				});
			},
			// -------------全部类目-------------
			async getList() {
				const res = await getListAllApi(this.tableForm);
				this.categroyData = res.data;
			},
			selectCategory(index) {
				this.selectedCategory = index; //索引
				this.secondaryIndex = -1; //二级索引重置
			}, //二级分类内容

			secondaryCategory(subItem, subIndex) {
				console.log(subItem)
				this.subValue = subItem;
				this.secondaryIndex = subIndex;
				this.subNameValue = this.subValue.name;
				console.log('选择了:', this.subNameValue);
				this.showUpClassPopup = false;
			},
			// 确认类目选择事件
			ComuleClassValue() {
				this.subNameValue = this.subValue.name;
				console.log('选择了:', this.subNameValue);
				this.showUpClassPopup = false;
			},
			closeComuleDate() {
				this.showUpDatePopup = false;
				this.showUpChoosePopup = false;
				this.showUpClassPopup = false;
			},


			// -------------事业部筛选------------
			cancelPicker() {
				this.invoiceClassShow = false;
				this.warehouseShow = false; // 仓库取消
			},
			operatyConfirm(ele) {
				let index = ele.detail.value;
				let operatyCity = this.operatyDataList[index].name;
				this.operatyCity = operatyCity;

				this.invoiceClassShow = false;
			},
			/**
			 获取经营城市
			 */
			async getOperatyList() {
				const res = await queryBusinessOperateCityApi(this.dataForm);
				if (res.code == 200) {
					this.tableData = res.data;
					let operatyDataList = [{
						name: '全部管理城市',
						id: -1,
						useId: -1
					}];
					for (let item of this.tableData) {
						operatyDataList.push({
							name: item.name,
							id: item.id,
							useId: item.useId,
						})
					};
					this.operatyDataList = operatyDataList;
				}
			},
		}
	}
</script>

<style lang="scss">
	/* #ifndef APP-PLUS */
	page {
		width: 100%;
		min-height: 100%;
		display: flex;
	}

	::v-deep .u-popup {
		flex: 0 !important;
	}

	.page {
		flex: 1;
	}

	/* #endif */
	.products {
		display: flex;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		// background-color: #ffffff;
		/* #ifdef MP-ALIPAY || MP-BAIDU */
		height: 100vh;
		/* #endif */
	}

	.bg_color {
		@include main_bg_color(theme);
	}

	.plain_bgColor {
		@include main_color(theme);
		@include main_bg_rgba_color(theme, 0.05);
		border: 1rpx solid;
	}

	.tab-view {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.search-tab {
		display: flex;
		justify-content: center;
		height: 40px;
		line-height: 40px;
		text-align: center;
		color: #717173;

		.class_choose {
			display: flex;
			flex: 1;
			justify-content: center;
		}
	}

	.swiper-item {
		flex: 1;
		flex-direction: column;
	}

	.swiper-page {
		flex: 1;
		flex-direction: column;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}

	.ensure {
		width: 100%;
		background-color: #fff;
		padding-bottom: 22rpx;
		padding-bottom: calc(22rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(22rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

		.title {
			font-size: 32rpx;
			color: #282828;
			text-align: center;
			margin: 38rpx 0 36rpx 0;
			position: relative;

			.iconfont {
				position: absolute;
				left: 30rpx;
				top: 0;
				font-size: 36rpx;
			}

			.iconfontRight {
				position: absolute;
				right: 30rpx;
				top: 0;
				font-size: 36rpx;
			}
		}

		.classTitle {
			font-size: 30rpx;
			font-weight: bold;
			color: #282828;
			text-align: center;
			padding: 30rpx 0 30rpx 0;
			position: relative;
			border-bottom: 1px solid #f0edf0;

			.iconfont {
				position: absolute;
				right: 30rpx;
				top: 28rpx;
				font-size: 30rpx;
			}
		}
	}

	/* 分类 */
	.categories {
		flex: 1;
		min-height: 400rpx;
		display: flex;
	}

	/* 一级分类 */
	.primary {
		overflow: hidden;
		width: 330rpx;
		height: 900rpx;
		flex: none;
		background-color: #fbf8fb;

		.item {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 96rpx;
			font-size: 30rpx;
			color: #595c63;
			padding: 16rpx;
			position: relative;

			&::after {
				content: '';
				position: absolute;
				left: 42rpx;
				bottom: 0;
				width: 330rpx;
				// border-top: 1rpx solid #e3e4e7;
			}
		}

		.active {
			background-color: #fffeff;
			@include main_color(theme);

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 8rpx;
				height: 100%;
				@include main_bg_color(theme);
			}
		}
	}

	.primary .item:last-child::after,
	.primary .active::after {
		display: none;
	}

	/* 二级分类 */
	.secondary {
		background-color: #fffeff;
		// height: 100%;
		min-height: 845rpx;
		height: 900rpx;
		// .carousel {
		// 	height: 200rpx;
		// 	margin: 0 30rpx 20rpx;
		// 	border-radius: 4rpx;
		// 	overflow: hidden;
		// }

		.panel {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 96rpx;
			font-size: 26rpx;
			color: #595c63;
			position: relative;

			&::after {
				content: '';
				position: absolute;
				left: 42rpx;
				bottom: 0;
				width: 330rpx;
				border-top: 1rpx solid #e3e4e7;
			}
		}

		.active {
			background-color: #fffeff;
			@include main_color(theme);

			// &::before {
			// 	content: '';
			// 	position: absolute;
			// 	left: 0;
			// 	top: 0;
			// 	width: 8rpx;
			// 	height: 100%;
			// 	@include main_bg_color(theme);
			// }
		}
	}

	/deep/ .tui-drawer-container_bottom {
		border-radius: 16rpx 16rpx 0 0;
	}
</style>